<template>
	<view class="ml-calendar" :style="{'margin-top':top+'rpx'}">
		<view class="ml-calendar-head e-flex e-flex-xy-center">
			<view class="e-p-20 e-flex e-flex-xy-center" @tap.stop="last">
				<image class="img-20" src="../../static/arrow_l.png" mode=""></image>
			</view>
			<text>{{year}}{{$t('common.年')}}{{month}}{{$t('common.月')}}</text>
			<view class="e-p-20 e-flex e-flex-xy-center" @tap.stop="last">
				<image class="img-20" src="../../static/arrow_r.png" mode="" @tap.stop="next"></image>
			</view>

		</view>
		<view class="ml-calendar-header__weekdays">
			<text class="ml-calendar-header__weekdays__weekday" v-for="item in weeks" :key="item">
				{{$t(item)}}
			</text>
		</view>
		<view class="ml-calendar-month__days">
			<view class="ml-calendar-month__days__day" v-for="(item, index) in date" :key="index"
				:class="{'active':item&&item.color}" @tap.stop="$emit('select',item)">
				<view class="ml-calendar-tips" :style="{'background-color':item&&item.color}">
					<view class="now-class" v-if="item&&item.now" :style="{'background-color': AppSkin.primary}">

					</view>
				</view>
				<text v-if="item" :class="[{'now':item.now}]">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, watch, onMounted } from 'vue'
	import dayjs from '@/uni_modules/endless-ui/libs/utils/dayjs'

	type DateItem = {
		text : string | number;
		date : string;
		color : string;
		now : boolean;
	}

	const props = withDefaults(defineProps<{
		top ?: number
		rows ?: DateItem[]
		range ?: string[]
		value : string | number | Date
	}>(), {
		top: 0,
		rows: () => [],
		range: () => ["", ""],
		value: ""

	})
	const emit = defineEmits(['change'])

	const year = ref<number | string>('')
	const month = ref<number | string>('')
	const date = reactive<DateItem[]>([])
	const now = ref('')
	const first = ref(dayjs(props.value || new Date()).format("YYYY-MM"))
	const weeks = [
		'nearby.周一',
		'nearby.周二',
		'nearby.周三',
		'nearby.周四',
		'nearby.周五',
		'nearby.周六',
		'nearby.周日',
	]


	const render = () => {
		date.splice(0, date.length)
		year.value = dayjs(first.value).year();
		month.value = dayjs(first.value).month() + 1;
		now.value = dayjs().format("YYYY-MM-DD")

		let days = [...new Array(dayjs(first.value).daysInMonth()).keys()].map(i => {
			let n = i + 1;
			let text = n < 10 ? "0" + n : n;
			let date = `${first.value}-${text}`;
			let _now = !!(dayjs(date).diff(now.value, 'day') === 0);
			let color = "";
			let obj = props.rows.find(item => dayjs(date).diff(item.date, 'day') === 0);
			if (obj) {
				color = obj.color
			}
			return {
				text,
				date,
				color,
				now: _now,
			}
		})
		let week = dayjs(`${year.value}-${month.value}-1`).day();
		date.push(...new Array(week ? (week - 1) : 6).fill(null), ...days)
	}
	watch(first, () => {
		render()
		emit("change", {
			year: year.value,
			month: month.value,
		})
	})
	watch(() => props.rows, () => {
		render()
	})
	const last = () => {

		let _first = dayjs(first.value).subtract(1, 'month');
		first.value = dayjs(_first).format("YYYY-MM");
	}
	const next = () => {
		let _first = dayjs(first.value).add(1, 'month');
		first.value = dayjs(_first).format("YYYY-MM");
	}


	onMounted(() => {
		render();
	})
</script>

<style lang="scss" scoped>
	.ml-calendar-month__days {
		position: relative;
		display: grid;
		box-sizing: border-box;
		padding: 0 10rpx;
		grid-template-columns: repeat(7, 1fr);

		.ml-calendar-month__days__day {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 18rpx 0;
			box-sizing: border-box;
			position: relative;

			&.active {
				text {
					color: white;
				}
			}

			.ml-calendar-tips {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);

				.now-class {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}
			}

			text {
				position: relative;
				z-index: 1;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 50rpx;

				&.now {
					font-size: 28rpx;
				}
			}
		}
	}

	.ml-calendar-header__weekdays {
		height: 71rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 10rpx 20rpx 0;

		.ml-calendar-header__weekdays__weekday {
			flex: 1;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #5C6261;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.ml-calendar {
		width: 100%;
		background: white;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		padding-bottom: 11rpx;

		.ml-calendar-head {
			width: 100%;
			height: 74rpx;
			padding: 11rpx 30rpx 0;
			box-sizing: border-box;
			background: #F8F8F8;
			border-radius: 8rpx;
			display: flex;
			align-items: center;

			text {
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #111111;
			}
		}
	}
</style>